<template>
	<scroll-view class="container" scroll-y @scrolltolower="scroll">
		<view class="card" v-for="(item,index) in list" :key="index">
			<view class="formBox-item">
				<label for="">时间</label>
				<text>:</text>
				<text style="margin-left: 20rpx;">{{item.created_at}}</text>
			</view>
			<view class="formBox-item">
				<label for="">订单号</label>
				<text>:</text>
				<text style="margin-left: 20rpx;">{{item.created_at}}</text>
			</view>
			<view class="formBox-item">
				<label for="">姓名</label>
				<text>:</text>
				<text style="margin-left: 20rpx;">{{item.student_name}}</text>
			</view>
			<view class="formBox-item">
				<label for="">缴费</label>
				<text>:</text>
				<text style="margin-left: 20rpx;">{{item.month}}</text>
				<label style="width: 70rpx;margin-left: 50rpx;">金额</label>
				<text>:</text>
				<text style="margin-left: 20rpx;">{{item.money}}</text>
			</view>
			<view class="formBox-item">
				<label for="">备注</label>
				<text>:</text>
				<text style="margin-left: 20rpx;"></text>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		water
	} from '@/api/order.js'
	export default {
		data() {
			return {
				list: [],
				page: 1,
				count: 0
			};
		},
		onLoad() {
			this.water(this.page)
		},
		methods: {
			scroll() {
				if (this.count <= this.list.length) {
					return
				}
				this.page++
				this.water(this.page)
			},
			//获取已绑定学生信息
			async water(page) {
				let res = await water({
					page,
					size: 6
				})
				if (res.code == 200) {
					this.list = [...this.list, ...res.data.list]
					this.count = res.data.count
				} else {
					uni.$u.toast(res.msg);
				}

			},
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100vw;
		height: 100%;
		padding: 20rpx;
		box-sizing: border-box;

		.card {
			width: 100%;
			padding: 40rpx;
			box-sizing: border-box;
			box-shadow: 5rpx 5rpx 10rpx 1px rgba(0, 0, 0, 0.3);
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 40rpx;

			.formBox-item {
				width: 100%;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				>label {
					width: 100rpx;
					text-align-last: justify;
					font-weight: bold;
				}

				>text {
					color: #6e6e6e;
				}
			}
		}
	}
</style>